<template>
  <section class="section-banner">
    <banner-carousel :bannerList="bannerList"></banner-carousel>
  </section>
  <!-- 关于我们 -->
  <section class="section-about">
    <div class="container">
      <div class="title">Why Choose Us</div>
      <!-- <div class="subtitle">our story</div> -->
      <div class="row">
        <!-- <div  v-if="homeProfile" v-html="homeProfile.content.rendered"></div> -->
        <div class="col-md-12 description">
          <iframe
            id="articleIframe"
            style="width: 100%"
            scrolling="no"
            frameborder="0"
            :src="wordPressArticleUrl"
          ></iframe>
        </div>
        <div class="col-md-12">
          <div class="service-content">
            <service-carousel :homeServiceList="homeServiceList">
            </service-carousel>
            <!-- <a class="button" @click="jumpLink('/service')">View More</a> -->
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 项目 -->
  <section class="section-project">
    <div class="container">
      <div class="title">Projects</div>
      <div class="subtitle"></div>
      <div class="row">
        <div class="col-md-4">
          <div class="subtitle">We are added some of featured projects</div>
          <p class="description">
            All of our team members have engineering and English background,
            construction drawings will be definitely no problem in Welons as
            Welons is the solution provider only focusing on the oversea market.
          </p>
          <a class="button" @click="jumpLink('/project')">View All Projects</a>
        </div>
        <div class="col-md-8">
          <project-carousel
            :homeProjectList="homeProjectList"
          ></project-carousel>
        </div>
      </div>
    </div>
  </section>

  <!-- 流程 -->
  <section class="section-process">
    <div class="container">
      <div class="title">Service Process</div>
      <div class="subtitle"></div>
      <div class="row">
        <div class="col-md-8">
          <div class="row">
            {{ void (processData = processData1.transformData) }}
            <div class="col-md-12 process">
              <!-- <div class="process-title">
                {{ processData.sourcingProecess.title }}
              </div>
              <div class="process-content">
                <a-timeline>
                  <template v-for="(item, index) in processData.sourcingProecess.list" :key="index">
                    <a-timeline-item>{{ item.title }}</a-timeline-item>
                  </template>
                </a-timeline>
              </div> 
              -->
              <img
                :src="require('@/assets/image/service-process-left.png')"
                class="w-100 h-100"
              />
            </div>
            <div class="col-md-12 process"></div>
          </div>
        </div>
        <div class="col-md-4">
          <img
            :src="require('@/assets/image/service-process-img.png')"
            class="img-fluid"
          />
        </div>
      </div>
    </div>
  </section>

  <!-- 博客 -->
  <section class="section-blog">
    <div class="container">
      <div class="title">Blog &amp; News</div>
      <div class="subtitle">below we are added some of our latest news</div>
      <div class="row">
        <template v-for="(item, index) in homeBlogList" :key="index">
          <div class="post col-md-6 p-3">
            <div
              class="entry-wrapper"
              @click="jumpLink(`/blog/detail/${item.id}`)"
            >
              <div class="entry-image">
                <img
                  :src="
                    $getImgUrlFromMediaById(item.featured_media_src_url)
                      ? $getImgUrlFromMediaById(item.featured_media_src_url)
                      : require('@/assets/image/banner-default.png')
                  "
                  class=""
                />
                <!-- 
                <a href="#"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></a>
                <a href="#"><i class="fa fa-share-alt" aria-hidden="true"></i></a> 
                -->
              </div>
              <div class="entry-content p-5">
                <!--
                   <div class="post-publishTime">
                  <small>{{ item.date.replace("T", " ") }}</small>
                </div> 
                -->
                <h5 class="post-title">
                  {{ $wordpressDecodeHTML(item.title.rendered) }}
                </h5>
                <!-- 
                  <div class="post-description">
                  <p>
                    {{ $deleteHtmlTag(item.excerpt.rendered) }}
                  </p>
                </div>
                 -->
                <!-- 
                  <a
                  class="post-readMore"
                  @click="jumpLink(`/blog/detail/${item.id}`)"
                >
                  Read More
                  <i class="fa fa-long-arrow-right"></i>
                </a>
                 -->
              </div>
            </div>
          </div>
        </template>

        <div class="col-12 text-center">
          <a class="button" @click="jumpLink('/blog')">View all blogs</a>
        </div>
      </div>
    </div>
  </section>
  <!-- 联系我们 -->
  <!-- 
    <section class="section-contact-us">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <img
            class="img-fluid"
            :src="require('@/assets/image/ask-icon.png')"
          />
        </div>
        <div class="col-md-6">
          <div class="title">Contact Us</div>
          <div class="subtitle">Are you interested in working with us</div>
          <p>
            All of our team members have engineering and English background,
            construction drawings will be definitely no problem in Welons as
            Welons is the solution provider only focusing on the oversea market.
          </p>
          <a class="button" @click="jumpLink('/profile/contact')">contact us</a>
        </div>
      </div>
    </div>
  </section> 
  -->
</template>

<script>
import BannerCarousel from "./components/BannerCarousel.vue";
import ProjectCarousel from "./components/ProjectCarousel.vue";
import ServiceCarousel from "./components/ServiceCarousel.vue";

import BaseInfo from "@/datas/BaseInfo.json";

import { getArticleById } from "@/api/index";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";

export default {
  name: "HomeIndex",
  components: { BannerCarousel, ProjectCarousel, ServiceCarousel },
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      // processData: BaseInfo.processData,
      processData1: { transformData: null },
      wordPressArticleUrl: `/wordpress/archives/127`,
    });
    const refData = toRefs(data);
    onBeforeMount(async () => {
      // await methods.getHomeProcessData();
    });
    onMounted(() => {
      var iframeObj = document.getElementById("articleIframe");
      iframeObj.onload = function () {
        proxy.$iframeAutoFit(iframeObj);
      };
    });
    //
    const computedData = {
      //轮播图列表
      bannerList: computed(() => {
        return proxy.$store.getters.bannerList;
      }),
      //简介
      homeProfile: computed(() => proxy.$store.getters.homeProfile),
      //
      //服务列表
      homeServiceList: computed(() => {
        return proxy.$store.getters.homeServiceList;
      }),
      //项目列表
      homeProjectList: computed(() => {
        return proxy.$store.getters.homeProjectList;
      }),
      //新闻列表
      homeBlogList: computed(() => {
        return proxy.$store.getters.homeBlogList;
      }),
    };
    //
    const methods = {
      jumpLink: (url) => {
        proxy.$router.push({ path: url });
      },
      //
      async getHomeProcessData() {
        getArticleById(240).then((res) => {
          data.processData1 = res;
          var transformData = proxy
            .$deleteHtmlTag(res.content.rendered)
            .replace(/&#91;/g, "[");
          data.processData1.transformData = JSON.parse(transformData);
          console.log(data.processData1.transformData);
        });
      },
      //
      openService: () => {
        // easemobim.config = {
        //   hide: true,
        //   autoConnect: false,
        // };
      },
    };
    //
    return {
      ...refData,
      //
      ...computedData,
      ...methods,
    };
  },
};
</script>

<style lang="scss" scoped>
//
.section-about {
  // margin-bottom: 100px;
  padding: 100px 0;

  .title {
    font-size: 2.5rem;
    color: #464d50;
    // //font-family: Muli, sans-serif;
    line-height: 1.2;
    letter-spacing: -2px;
    text-align: center;
    text-transform: uppercase;
  }

  .subtitle {
    font-size: 1.125rem;
    color: #848d91;
    // //font-family: Muli, sans-serif;
    line-height: 1;
    margin-bottom: 30px;
  }

  .description {
    line-height: 1.5rem;
    color: #848d91;
  }

  .type-service {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background: #fff;
    border: 1px solid #e9ebef;

    .entry-content {
      text-align: center;

      div {
      }

      h4 {
        font-size: 1.5rem;
        font-family: "Source Sans Pro", sans-serif;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1;
        margin: 1.8rem 0 2rem;
      }
    }
  }

  .service-content {
    margin-top: 3rem;

    position: relative;

    a.button {
      position: absolute;
      bottom: -3rem;
      right: 1rem;
      padding: 1.25rem 2rem;
      border-radius: 2rem;
    }
  }
}
//
.section-project {
  padding: 100px 0;
  background: #eaf2f5;

  .title {
    font-size: 2.5rem;
    color: #464d50;
    line-height: 1;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
  }

  .subtitle {
    font-size: 1.125rem;
    color: #7e8284;
    line-height: 1;
    margin-bottom: 40px;
  }

  p.description {
    font-size: 1.125rem;
    //font-family: Muli, sans-serif;

    line-height: 28px;
    margin-bottom: 50px;
    color: #7e8284;
  }

  a.button {
    padding: 1.25rem 2rem;
    border-radius: 2rem;
  }
}

.section-process {
  padding: 100px 0;

  .title {
    font-size: 2.5rem;
    //font-family: Muli, sans-serif;
    color: #464d50;
    line-height: 1;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
  }

  .subtitle {
    font-size: 1.125rem;
    //font-family: Muli, sans-serif;
    color: #7e8284;
    line-height: 1;
    text-align: center;
    margin-bottom: 40px;
  }

  .process {
    .process-title {
      font-size: 1.125rem;
      font-weight: 500;
    }

    .process-content {
      margin-top: 20px;
    }

    :deep(ul.ant-timeline) {
      .ant-timeline-item {
        font-size: 1.125rem;
        color: #7e8284;
      }
    }
  }
}

.section-blog {
  padding: 100px 0;

  .title {
    font-size: 2.5rem;
    //font-family: Muli, sans-serif;
    color: #464d50;
    line-height: 1;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .subtitle {
    font-size: 1.125rem;
    //font-family: Muli, sans-serif;
    color: #7e8284;
    line-height: 1;
    text-align: center;
    margin-bottom: 40px;
  }

  .post {
    &:hover {
      cursor: pointer;
    }

    .entry-image {
      position: relative;
      img {
        width: 100%;
        max-height: 400px;
      }

      a {
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
        text-align: center;

        i {
          font-size: 1rem;
          color: white;
          width: 2rem;
          height: 2rem;
          line-height: 2rem;
          background: #0fccba;
          border-radius: 0;
        }
      }

      a:last-child {
        top: 3.5rem;

        i {
          background: #8260e3;
        }
      }
    }

    .entry-wrapper {
      -webkit-box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.1);
      box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.1);
    }

    .entry-content {
      background: #fff;
    }

    .post-title {
      font-size: 1.5rem;
      //font-family: Muli, sans-serif;
      font-weight: 400;
      line-height: 1;
      margin-bottom: 30px;
      color: #464d50;
    }

    .post-publishTime {
      font-size: 1rem;
      font-family: "Source Sans Pro", sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 10px;
      color: #0accb9;
    }

    .post-description {
      font-size: 1rem;
      font-family: "Source Sans Pro", sans-serif;
      font-weight: 300;
      line-height: 1.5rem;
      margin-bottom: 2rem;
      color: #7e8284;

      p::before {
        content: "...";
        position: absolute;
        right: 0;
        bottom: 0;
      }

      p {
        position: relative;
        width: 100%;
        height: 3rem;
        margin-right: -1em;
        padding-right: 1em;
        overflow: hidden;
        word-break: break-all;
      }

      p::after {
        content: "";
        position: absolute;
        right: 0;
        width: 1em;
        height: 1em;
        margin-top: 0.2em;
      }
    }

    .post-readMore {
      font-size: 0.8rem;
      font-family: "Source Sans Pro", sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      line-height: 1;
      color: #2f3437;
    }
  }

  a.button {
    margin-top: 30px;
    padding: 1.25rem 2rem;
    border-radius: 2rem;
  }
}

//
.section-contact-us {
  padding: 100px 0;
  background-color: #eaf2f5;
  position: relative;

  .title {
    font-size: 2.5rem;
    //font-family: Muli, sans-serif;
    color: #464d50;
    line-height: 1;
    margin-bottom: 10px;
  }

  .subtitle {
    font-size: 1.125rem;
    //font-family: Muli, sans-serif;
    color: #848d91;
    line-height: 1;
    margin-bottom: 40px;
  }

  p {
    font-size: 1rem;
    font-family: "Source Sans Pro", sans-serif;
    color: #848d91;
    line-height: 1.75rem;
    margin-bottom: 40px;
  }

  a.button {
    padding: 1.25rem 4rem;
    border-radius: 2rem;
  }
}
</style>
